<template>
  <div class="user">
    <!-- 查询表单 start -->
    <ui-form class="query-form" :model="form">
      <ui-form-item label="用户名">
        <ui-input type="text" placeholder="请输入用户名" v-model="form.searchName"> </ui-input>
      </ui-form-item>
      <ui-button class="primary-btn" @click="searchCall" icon="ui-icon-search">查询</ui-button>
      <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
    </ui-form>
    <ui-button class="primary-btn mg-bt-20" @click="userAdd" icon="ui-icon-plus" v-permission="['user-add']">添加用户</ui-button>
    <!-- 查询表单 end -->
    <!-- 查询信息结果 start -->
    <vx-nodata :list="tableList" v-loading="isLoading" sub-title="暂无数据">
      <ui-table :data="tableList">
        <ui-table-column label="登录ID">
          <template v-slot="scope"> {{ scope.row.loginId }}</template>
        </ui-table-column>
        <ui-table-column label="用户名">
          <template v-slot="scope"> {{ scope.row.userName }}</template>
        </ui-table-column>
        <ui-table-column label="是否启用">
          <template v-slot="scope"> {{ $msg('enabledDict')[scope.row.enabled] }}</template>
        </ui-table-column>
        <ui-table-column label="是否管理员">
          <template v-slot="scope"> {{ $msg('adminDict')[scope.row.adminFlag] }}</template>
        </ui-table-column>
        <ui-table-column label="角色">
          <template v-slot="scope"> {{ scope.row.adminFlag === 0 ? scope.row.roleNames || '--' : '管理员' }}</template>
        </ui-table-column>
        <ui-table-column label="操作">
          <template v-slot="scope">
            <ui-button type="text" icon="ui-icon-tickets" @click="click('showDetail', scope.row)">详情</ui-button>
            <ui-button icon="ui-icon-delete" class="mg-lt-10" type="text" @click="userRemove(scope.row.id)" v-permission="['user-del']"
              >删除</ui-button
            >
            <ui-button type="text" class="reset-btn" icon="ui-icon-refresh-right" @click="passWordReset(scope.row)">密码重置</ui-button>
          </template>
        </ui-table-column>
      </ui-table>
      <ui-pagination
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :layout="layout"
        :page-sizes="pageSizeList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </ui-pagination>
    </vx-nodata>
    <!-- 查询信息结果 end -->
    <vx-dialog v-model="showDetail" title="用户详情" confirm-text="修改" @confirm="confirmDetail">
      <ui-form label-width="200px" :model="content" class="vx-form">
        <ui-form-item label="登录ID">
          {{ content.loginId }}
        </ui-form-item>
        <ui-form-item label="用户名">
          {{ content.userName }}
        </ui-form-item>
        <ui-form-item label="邮箱地址">
          {{ content.email || '--' }}
        </ui-form-item>
        <ui-form-item label="手机号">
          {{ content.phone || '--' }}
        </ui-form-item>
        <ui-form-item label="是否是管理员">
          {{ $msg('adminDict')[content.adminFlag] }}
        </ui-form-item>
        <ui-form-item label="角色" v-if="content.adminFlag === 0">
          {{ content.roleNames }}
        </ui-form-item>
        <ui-form-item label="是否启用">
          {{ $msg('enabledDict')[content.enabled] }}
        </ui-form-item>
        <ui-form-item label="创建时间">
          {{ content.createTime }}
        </ui-form-item>
      </ui-form>
    </vx-dialog>
  </div>
</template>

<script>
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import userApi from '@/api/user';

// eslint-disable-next-line vue/require-name-property
export default {
  name:'user',
  mixins: [pagination],
  data() {
    return {
      tableList: undefined,
      isLoading: false,
      showDetail: false, //详情
      showAdd: false, //添加角色
      content: {}, //点击的按钮行内容
      form: {
        searchName: '', //查询用户名
      },
      layout: 'prev, pager, next, total',
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    /**
     * @description 跳转新增页面
     */
    userAdd() {
      this.$router.push({ path: '/system/user/userAddPre' });
    },
    /**
     * @description 跳转密码重置页面
     * @param {Object} item 当前点击的本条数据
     */
    passWordReset(item) {
      this.setData(item);
      this.$router.push({ path: '/system/user/passWordResetPre' });
    },
    /**
     * @description 查询方法
     *
     */
    async searchList() {
      try {
        this.isLoading = true;
        const res = await userApi.userListPage({ userName: this.form.searchName, pageSize: this.pageSize, pageNum: this.currentPage });
        //查询用户角色接口
        this.tableList = res.data.list;
        this.total = res.data.total;
      } finally {
        this.isLoading = false;
      }
    },
    /**
     * @description 确定删除角色
     * @param {Object} id 当前打开的本条数据的id
     */
    async userRemove(id) {
      this.$confirm('确定删除该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const res = await userApi.userRemove({ ids: id });
        this.$message.success(res.msg);
        this.searchList();
      });
    },
    /**
     * @description 打开弹框
     * @param {Object} showDialog 当前打开的弹窗
     * @param {Object} item 当前打开的本条数据
     */
    click(showDialog, item) {
      this.content = ''; //每次进入清空内容
      this[showDialog] = true; //打开弹框
      this.content = item; //赋值
    },
    /**
     * @description 用户详情弹框点击
     */
    confirmDetail() {
      this.setData(this.content);
      //跳转修改页面
      this.$router.push({ path: '/system/user/userChangePre' });
    },
    /**
     * @description 重置按钮
     */
    reset() {
      this.form.searchName = '';
      this.searchList();
    },
  },
};
</script>

<style lang="scss">
.user {
  .ui-icon-plus,
  .ui-icon-search {
    color: #fff;
  }
  .reset-btn {
    margin-left: 5px;
  }
}
</style>
